@tailwind components;

@layer components {
  .file-list-item {
    @apply relative flex w-full grow flex-row items-center text-base;

    &.selected {
      @apply border-primary/10;
    }

    &.is-dragging {
      @apply opacity-50;
    }
  }

  .hover-action {
    @apply invisible text-primary transition group-hover:visible;

    img {
      width: 14px;
    }
  }

  .file-list-item-edit-name-button {
    min-width: 20px;

    @apply ml-1 h-5 w-5 cursor-pointer text-primary opacity-0;
  }

  .file-list-item-name {
    &:hover {
      .file-list-item-edit-name-button {
        @apply opacity-100;
      }
    }
  }

  // .file-list-item-name-span {
  //   @apply flex-1 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap px-1 text-gray-80;
  // }

  .file-list-item-actions-button {
    @apply h-5 w-5 rounded-1/2 bg-gray-5 p-0.5 font-bold text-primary;
  }
}
